<template>
    <div class="acc-basic">
        <form @submit="()=>{return false;}">
            <div class="page-tit">绑定账号</div>
            <!-- <div class="form-item">
                <label>绑定邮箱</label>
                <input class="max-340" v-model="form.email" type="text" :disabled="info.email" placeholder="请输入" ><a class="primary-btn" @click="handleBindEmail" v-if="!isSendEmail&&step==1">{{info.email?'更换邮箱':(isSendEmail?second+'秒后重试':'获取验证码')}}</a>
            </div>
            <div class="form-item" v-if="step==2&&changeType=='email'">
                <label>验证码</label>
                <input class="max-340" v-model="form.emailCode" type="text" placeholder="请输入"><a class="primary-btn" @click="handleConfirmBindEmail" v-if="!info.email">绑定</a><a class="primary-btn" @click="handleAgainSend('email')" v-else>{{isSendPhone?second+'秒后重试':'重新获取'}}</a>
            </div>
            <div class="form-item" v-if="step==2&&changeType=='email'">
                <label>绑定新邮箱</label>
                <input class="max-340" v-model="form.newEmail" type="text" placeholder="请输入" ><a class="primary-btn" @click="handleConfirmChange">确认更换</a>
            </div> -->
            <!-- <bindEmail :form.sync="form" :info.sync="info" v-if="info.id"/> -->

            <!-- <div class="page-tit mt40">绑定手机</div> -->
            <!-- <div class="form-item mt40">
                <label>绑定手机号</label>
                <input class="max-340" v-model="form.phone" type="text" :disabled="info.phone" placeholder="请输入"><a class="primary-btn" @click="handleBindPhone" v-if="!isSendPhone&&step==1">{{info.email?'更换手机号':(isSendPhone?second+'秒后重试':'获取验证码')}}</a>
            </div>
            <div class="form-item" v-if="step==2&&changeType=='phone'">
                <label>验证码</label>
                <input class="max-340" v-model="form.emailCode" type="text" placeholder="请输入"><a class="primary-btn" @click="handleConfirmBindPhone" v-if="!info.phone">绑定</a><a class="primary-btn" @click="handleAgainSend('phone')" v-else>{{isSendPhone?second+'秒后重试':'重新获取'}}</a>
            </div>
            <div class="form-item" v-if="step==2&&changeType=='phone'">
                <label>绑定新手机号</label>
                <input class="max-340" v-model="form.newPhone" type="text" placeholder="请输入" ><a class="primary-btn" @click="handleConfirmChangePhone">确认更换</a>
            </div> -->
            <bindPhone :form.sync="form" :info.sync="info" v-if="info.id"/>

            <div class="other-form-item">
                <label>第三方绑定</label>
                <div class="bind-item">
                    <i class="weixin" :class="{'active':thirdAccList.weixin&&thirdAccList.weixin.id}"></i><a class="bind confirm" @click="touchThirdLogin(0)" v-if="!thirdAccList.weixin||!thirdAccList.weixin.id">绑定</a><a v-else class="bind cancel-bind" @click="handleUnBind(thirdAccList.weixin?thirdAccList.weixin.id:'')">取消绑定</a>
                </div>
                <div class="bind-item">
                    <i class="qq" :class="{'active':thirdAccList.qq&&thirdAccList.qq.id}"></i><a class="bind confirm" @click="touchThirdLogin(1)" v-if="!thirdAccList.qq||!thirdAccList.qq.id">绑定</a><a v-else class="bind cancel-bind" @click="handleUnBind(thirdAccList.qq?thirdAccList.qq.id:'')">取消绑定</a>
                </div>
                <div class="bind-item">
                    <i class="sinaweibo" :class="{'active':thirdAccList.weibo&&thirdAccList.weibo.id}"></i><a class="bind confirm" @click="touchThirdLogin(2)" v-if="!thirdAccList.weibo||!thirdAccList.weibo.id">绑定</a><a v-else class="bind cancel-bind" @click="handleUnBind(thirdAccList.weibo?thirdAccList.weibo.id:'')">取消绑定</a>
                </div>
            </div>
            <!-- <div class="other-form-item">
                <label>注销账号 <i class="smalltip">注销后账号所有数据将被销毁并不可找回，请谨慎操作。</i></label>
            </div>
            <div class="zxfot-btn">
                <a class="zhuxiao" @click="handleLogOff">注销账号</a>
            </div> -->
        </form>
    </div>
</template>

<script>
import bindPhone from './bindPhone'
import bindEmail from './bindEmail'
import api from '@/api/api'
export default {
    components:{bindEmail,bindPhone},
    data(){
        return {
			thirdAccList:{},
            changeType:'',
            step:1,
            form:{
                email:''
            },
            emailCode:'',
            isSendEmail:false,
            isSendPhone:false,
            timer:null,
            second:60,
            info:{

            }
        }
    },
    methods:{
        async handleUnBind(_id){
            let that=this;
            let res=await api.cancelBindThirdAcc({id:_id});
            if(res.code==0){
                this.$amessage.success('解绑成功')
                this.getThirdList();
            }
        },
        async getThirdList(){
            let res=await api.getThirdMaps();
            this.thirdAccList=res.data;
        },
        touchThirdLogin(index){
            let getUrl = encodeURIComponent('http://www.gameui.net/#/')
            // getUrl = encodeURIComponent('http://localhost:8080/#/')
            if(index == 0){
                //微信
                var auth_url = 'https://open.weixin.qq.com/connect/qrconnect?appid=wx797de16278f37e82&redirect_uri='+getUrl+'&response_type=code&scope=snsapi_login&state=game_bind_wx#wechat_redirect'
                window.location.replace(auth_url);
                localStorage.setItem('type','weixin')
            } else if (index == 1){
                //qq
                var auth_url = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101911972&redirect_uri=http://www.gameui.net/index.html&scope=get_user_info&state=game_bind_qq'
                window.location.replace(auth_url);
                localStorage.setItem('type','qq')
            } else if (index == 2){
                //微博
                var auth_url = 'https://api.weibo.com/oauth2/authorize?client_id=2827345101&response_type=code&redirect_uri=' + getUrl+'&state=game_bind_weibo';

                window.location.replace(auth_url);
                localStorage.setItem('type','weibo')
            }
        },
        async handleAgainSend(_type){
            let that=this;
            if(_type=='email'){
                let res=await api.sendSms({phone:this.form.email,type:1});
                if(res.code==0){
                    this.isSendEmail=true;
                    this.step=2;
                    this.$amessage.success('发送成功')

                    this.timer=setInterval(function(){
                        if(that.second==1){
                            that.second=60;
                            that.isSendEmail=false;
                            clearInterval(that.timer);
                            return;
                        }
                        that.second--;
                    },1000)
                }
            }else{
                let res=await api.sendSms({phone:this.form.phone,type:1});
                if(res.code==0){
                    this.isSendPhone=true;
                    this.step=2;
                    this.$amessage.success('发送成功')

                    this.timer=setInterval(function(){
                        if(that.second==1){
                            that.second=60;
                            that.isSendPhone=false;
                            clearInterval(that.timer);
                            return;
                        }
                        that.second--;
                    },1000)
                }
            }
        },
        async handleLogOff(){
            this.$amessage.success({msg:'111sss'})
        },
        async handleConfirmChange(){
            if(!this.form.emailCode){
                this.$amessage.error('请填写验证码')
                return;
            }
            let res=await api.checkCode({type:1,phone:this.form.email,code:this.form.emailCode});
            if(res.code==0){
                var reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                if(!reg.test(this.form.newEmail)){
                    this.$amessage.error('新邮箱格式不正确')
                    return;
                }
                res=await api.bindEmail({email:this.form.newEmail});
                if(res.code==0){
                    this.$amessage.success('绑定成功')
                    if(this.timer)
                        clearInterval(this.timer);
                    this.second=60;
                    this.isSendEmail=false;
                    this.info.email=this.form.newEmail;
                }
            }
        },
        async handleConfirmChangePhone(){
            if(!this.form.emailCode){
                this.$amessage.error('请填写验证码')
                return;
            }
            let res=await api.checkCode({type:1,phone:this.form.phone,code:this.form.emailCode});
            if(res.code==0){
                let reg=/^1\d{10}$/;
                if(!reg.test(this.form.newPhone)){
                    this.$amessage.error('手机号格式不正确')
                    return;
                }
                res=await api.bindPhone({phone:this.form.newPhone});
                if(res.code==0){
                    this.$amessage.success('绑定成功')
                    if(this.timer)
                        clearInterval(this.timer);
                    this.second=60;
                    this.isSendPhone=false;
                    this.info.phone=this.form.newPhone;
                }
            }
        },
        async handleConfirmBindEmail(){
            if(this.isSendEmail){
                this.$amessage.error('请勿频繁操作')
                return;
            }
            if(!this.form.email||!this.form.emailCode){
                this.$amessage.error('请填写邮箱、验证码')
                return;
            }
            let res=await api.checkCode({type:1,phone:this.form.email,code:this.form.emailCode});
            if(res.code==0){
                res=await api.bindEmail({email:this.form.email});
                if(res.code==0){
                    this.$amessage.success('绑定成功')
                    if(this.timer)
                        clearInterval(this.timer);
                    this.second=60;
                    this.isSendEmail=false;
                    this.info.email=this.form.email;
                }
            }
        },
        async handleConfirmBindPhone(){
            if(this.isSendEmail){
                this.$amessage.error('请勿频繁操作')
                return;
            }
            if(!this.form.phone||!this.form.emailCode){
                this.$amessage.error('请填写邮箱、验证码')
                return;
            }
            let res=await api.checkCode({type:1,phone:this.form.phone,code:this.form.emailCode});
            if(res.code==0){
                res=await api.bindPhone({phone:this.form.phone});
                if(res.code==0){
                    this.$amessage.success('绑定成功')
                    if(this.timer)
                        clearInterval(this.timer);
                    this.second=60;
                    this.isSendPhone=false;
                    this.info.phone=this.form.phone;
                }
            }
        },
        async handleBindEmail(){
            this.changeType='email';
            let that=this;
            //已经绑定过邮箱时
            if(this.info.email){
                let res=await api.sendSms({phone:this.form.email,type:1});
                if(res.code==0){
                    this.isSendEmail=true;
                    this.step=2;
                    this.$amessage.success('发送成功')

                    this.timer=setInterval(function(){
                        if(that.second==1){
                            that.second=60;
                            that.isSendEmail=false;
                            clearInterval(that.timer);
                            return;
                        }
                        that.second--;
                    },1000)
                }
            }else{
                if(!this.form.email){
                    this.$amessage.error('请输入邮箱')
                    return;
                }
                var reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                if(!reg.test(this.form.email)){
                    this.$amessage.error('邮箱格式不正确')
                    return;
                }
                let res=await api.sendSms({phone:this.form.email,type:1});
                if(res.code==0){
                    this.isSendEmail=true;
                    this.step=2;
                    this.$amessage.success('发送成功')

                    this.timer=setInterval(function(){
                        if(that.second==1){
                            that.second=60;
                            that.isSendEmail=false;
                            clearInterval(that.timer);
                            return;
                        }
                        that.second--;
                    },1000)
                }
            }
        },
        async handleBindPhone(){
            this.changeType='phone';
            let that=this;
            //已经绑定过手机时
            if(this.info.phone){
                let res=await api.sendSms({phone:this.form.phone,type:1});
                if(res.code==0){
                    this.isSendPhone=true;
                    this.step=2;
                    this.$amessage.success('发送成功')

                    this.timer=setInterval(function(){
                        if(that.second==1){
                            that.second=60;
                            that.isSendPhone=false;
                            clearInterval(that.timer);
                            return;
                        }
                        that.second--;
                    },1000)
                }
            }else{
                if(!this.form.phone){
                    this.$amessage.error('请输入手机号')
                    return;
                }
                let reg=/^1\d{10}$/;
                if(!reg.test(this.form.phone)){
                    this.$amessage.error('手机号格式不正确')
                    return;
                }
                let res=await api.sendSms({phone:this.form.phone,type:1});
                if(res.code==0){
                    this.isSendPhone=true;
                    this.$amessage.success('发送成功')

                    this.timer=setInterval(function(){
                        if(that.second==1){
                            that.second=60;
                            that.isSendPhone=false;
                            clearInterval(that.timer);
                            return;
                        }
                        that.second--;
                    },1000)
                }
            }
        }
    },
    destroyed(){
        if(this.timer){
            clearInterval(this.timer);
        }
    },
    async mounted(){
        let res=await api.getUserInfo();
        // res.data.email='';
        // res.data.phone='';
        this.form.phone=res.data.phone;
        this.form.email=res.data.email;
        if(res.data){
            if(res.data.tags)
                res.data.tags=res.data.tags.split(',');
            this.info=res.data;
        }


        let bind_type=localStorage.getItem('bind_type');
        let _code=localStorage.getItem('code');
        if(bind_type&&_code){
            localStorage.removeItem('bind_type');
            localStorage.removeItem('code');

            res=await api.bindThirdAcc({code:_code,type:bind_type.replace('game_bind_','')});

            if(res.code==0){
                this.$amessage.success('绑定成功')
                this.getThirdList();
            }
        }else{
            this.getThirdList();
        }
    }
}
</script>

<style lang="less">
.acc-basic{
    .page-tit{
        font-size:16px;
        font-weight:500;
        line-height:22px;
        margin-bottom:22px;
    }
    .mt40{
        margin-top:40px;
    }
    .up-row{
        display: flex;
        align-items: center;
        margin-bottom:40px;
        justify-content: space-between;
        .lup{
            display: flex;
            align-items: center;
        }
        .img-box{
            margin-right:16px;
            img{
                width:80px;height:80px;
                object-fit: cover;
                border-radius:80px;
            }
        }
        .tbox{
            .name{
                font-size:16px;
                font-weight:500;
            }
            .up-tip{
                font-size:12px;
                color:#969696;
                margin-top:14px;
            }
        }
        .upload-btn{
            line-height:40px;
            width:90px;
            text-align: center;
            border-radius:8px;
            background:#29272F;
            font-size:14px;
            font-weight:500;
        }
    }
    .dbl-flex-item{
        display: flex;
        align-items: center;
        margin-bottom:20px;
        >.form-item{
            width:100%;
            margin-bottom:0px;
            &:first-child{
                margin-right:34px;
            }
        }
    }
    .form-item{
        margin-bottom:20px;
        
        .max-340{
            max-width:340px;
        }
        .primary-btn{
            color:#fff;
            background:#29272F;
            line-height:40px;
            width:100px;
            // padding:0px 20px;
            text-align: center;
            display: inline-block;
            font-size:14px;
            font-weight:500;
            border-radius:8px;
            margin-left:20px;
            transition:.1s all linear;
            &:hover{
                opacity:.9;
            }
            &.ml0{
                margin-left:0px !important;
            }
            &.confirm{
                background:#11CCB1;
            }
        }
        label{
            display: block;
            margin-bottom:10px;
            line-height:20px;
            font-size:14px;
        }
        input[type="text"]{
            background:#23232A;
            border:none;
            font-size:14px;
            padding-left:12px;
            height:40px;
            border-radius:8px;
            width:100%;
            color:#fff;
        }
        textarea{
            height:90px;
            padding:10px;
            background:#23232A;
            resize:none;
            border:none;
            font-size:14px;
        }
    }
    .other-form-item{
        margin-top:50px;
        label{
            display: block;
            margin-bottom:10px;
            line-height:20px;
            font-size:14px;
            .smalltip{
                font-size:12px;
                color:#969696;
                font-style: normal;
                margin-left:16px;
            }
        }
        .bind-item{
            margin-top:30px;
            display: flex;
            align-items: center;

            &:nth-child(2){
                margin-top:20px;
            }
            
            i{
                transition:.1s all linear;
            }
            .weixin{
                width:46px;height:46px;
                margin-right:21px;
                background-color:#29272F;
                border-radius:46px;
                background-image:url('../../assets/pro/user/acc/weixin.svg');
                background-repeat:no-repeat;
                background-position:center;
                background-size:20px 20px;
                &.active{
                    background-image:url('../../assets/pro/user/acc/weixin_active.svg');
                    background-repeat:no-repeat;
                    background-position:center;
                    background-size:20px 20px;
                    background-color:#03C160;
                }
            }
            .qq{
                width:46px;height:46px;
                margin-right:21px;
                background-color:#29272F;
                border-radius:46px;
                background-image:url('../../assets/pro/user/acc/qq.svg');
                background-repeat:no-repeat;
                background-position:center;
                background-size:20px 20px;
                &.active{
                    background-image:url('../../assets/pro/user/acc/qq_active.svg');
                    background-repeat:no-repeat;
                    background-position:center;
                    background-size:20px 20px;
                    background-color:#1A77F2;
                }
            }
            .sinaweibo{
                width:46px;height:46px;
                margin-right:21px;
                background-color:#29272F;
                border-radius:46px;
                background-image:url('../../assets/pro/user/acc/weibo.svg');
                background-repeat:no-repeat;
                background-position:center;
                background-size:20px 20px;
                &.active{
                    background-image:url('../../assets/pro/user/acc/weibo_active.svg');
                    background-repeat:no-repeat;
                    background-position:center;
                    background-size:20px 20px;
                    background-color:#D42D2C;
                }
            }
            .bind{
                color:#fff;
                background:#29272F;
                line-height:40px;
                width:100px;
                text-align: center;
                display: inline-block;
                font-size:14px;
                font-weight:500;
                border-radius:8px;
                transition:.1s all linear;
                &:hover{
                    opacity:.9;
                }
                &.confirm{
                    background:#11CCB1;
                }
            }
        }
        .tag-control{
            height:40px;
            border-radius:8px;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding-left:5px;
            background:#23232A;
            margin-bottom:15px;
            position: relative;
            .inp-tags{
                .tag{
                    line-height:30px;
                    padding-left:15px;
                    padding-right:12px;
                    border-radius:30px;
                    white-space:nowrap;
                    background:#33333C;
                    height:100%;
                    display: inline-block;
                    font-size:14px;
                    .del-tag{
                        width:10px;height:10px;
                        background:url('../../assets/pro/del_tag_ico.svg') no-repeat;
                        background-size:cover;
                        display: inline-block;
                        margin-left:11px;
                        opacity:.8;
                        &:hover{
                            opacity:1;
                        }
                    }
                }
            }
            input{
                background:#23232A;
                color: #fff;
                font-size:14px;
                width:100%;
                padding-left:13px;
                border:none;
            }
            .num{
                font-style: normal;
                font-size:14px;
                color:#6A6A80;
                position: absolute;
                right:10px;
                top:10px;
            }
        }
    }
    .zxfot-btn{
        margin-top:20px;
        .zhuxiao{
            color:#fff;
            background:#29272F;
            line-height:40px;
            width:100px;
            text-align: center;
            display: inline-block;
            font-size:14px;
            font-weight:500;
            border-radius:8px;
        }
    }
}






































</style>